<template>
  <div class="main-container">
    <div class="main-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path: '/customer/list'}">学员管理</el-breadcrumb-item>
        <el-breadcrumb-item>编辑学员资料</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrap">
      <div class="content">
        <el-form class="mt-30" ref="form" :model="form" label-width="150px" style="width: 450px;">
          <el-form-item label="昵称" prop="nickName" :rules="[ { required: true, message: '昵称不能为空'}]">
            <el-input v-model="form.nickName"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="realName">
            <el-input v-model="form.realName"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="phoneNumber">
            <el-input v-model="form.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="生日" prop="dateOfBirth">
            <el-date-picker type="date" :editable="false" v-model="form.dateOfBirth" style="width:100%" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="企业名称" prop="companyName">
            <el-input v-model="form.companyName"></el-input>
          </el-form-item>
          <el-form-item label="企业类型" prop="companyType">
            <el-select v-model="form.companyType" style="width: 100%">
               <el-option v-for="(item,index) in companyTypeList" :value="item.key" :key="index" :label="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="行业类型" prop="industryType">
            <el-select v-model="form.industryType" style="width: 100%">
              <el-option v-for="(item,index) in industryTypeList" :value="item.key" :key="index" :label="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位类型" prop="jobType">
            <el-select v-model="form.jobType" style="width: 100%">
              <el-option v-for="(item,index) in jobTypeList" :value="item.key" :key="index" :label="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学习目标" prop="learnTarget">
            <el-input v-model="form.learnTarget"></el-input>
          </el-form-item>
          <el-form-item label="省份" prop="provinceId">
            <el-select v-model="form.provinceId" @change="changeProvince">
              <el-option v-for="(item,index) in provinceList" :value="item.id" :label="item.name" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市" prop="cityId">
            <el-select v-model="form.cityId" @change="changeCity">
              <el-option v-for="(item,index) in cityList" :value="item.id" :label="item.name" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区" prop="districtId">
            <el-select v-model="form.districtId">
              <el-option v-for="(item,index) in areaList" :value="item.id" :label="item.name" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址" prop="addressInfo">
            <el-input v-model="form.addressInfo"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex">
              <el-option :value="0" label="男"></el-option>
              <el-option :value="1" label="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status">
              <el-option :value="0" label="正常"></el-option>
              <el-option :value="1" label="禁用"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="memo">
            <el-input v-model="form.memo" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="passWord">
            <el-input v-model="form.passWord" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">修改</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        industryTypeList: [],
        companyTypeList: [],
        jobTypeList: [],
        provinceList: [],
        cityList: [],
        areaList: [],
        form: {
          nickName: ''
        }
      }
    },
    activated() {
      this.loadProvinceList();
      this.initList();
    },
    created() {
      this.loadProvinceList();
      this.initList();
    },
    methods: {
      initList() {
        this.$api.typeEnum.getIndustryType().then(res => {
          this.industryTypeList = res
        })
        this.$api.typeEnum.getCompanyType().then(res => {
          this.companyTypeList = res
        })
        this.$api.typeEnum.getJobType().then(res => {
          this.jobTypeList = res
        })
      },
      loadProvinceList() {
        this.$api.getRegionById({type:1}).then(res => {
          if(res.success){
            this.provinceList = res.data
            this.loadData()
          }
        })
      },
      loadData() {
        this.form.customerId = this.$route.params.id
        this.$api.customer.getDetail(this.form.customerId).then(res => {
          if(res.success){
            this.form = res.data
            if(res.data.provinceId){
              this.initCity(res.data.provinceId)
            }
            if(res.data.cityId){
              this.initArea(res.data.cityId)
            }
          }
        })
      },
      initCity(val) {
        this.$api.getRegionById({regionId: val, type: 2}).then(res => {
          if(res.success){
            this.cityList = res.data
          }
        })
      },
      initArea(val) {
        this.$api.getRegionById({regionId: val, type: 3}).then(res => {
          if(res.success){
            this.areaList = res.data
          }
        })
      },
      changeProvince(val) {
        this.$api.getRegionById({regionId: val, type: 2}).then(res => {
          if(res.success){
            this.cityList = res.data
            this.form.cityId = null
          }
        })
      },
      changeCity(val) {
        console.log(val)
        this.$api.getRegionById({regionId: val, type: 3}).then(res => {
          if(res.success){
            this.areaList = res.data
            this.form.districtId = null
          }
        })
      },
      onSubmit() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.$api.customer.update(this.form).then(res => {
              if(res.success) {
                this.$message.success('保存成功')
                this.$refs.form.resetFields()
                this.$router.push('/customer/list');
              }
            })
          }
        })
      },
      onReset() {
        this.$refs.form.resetFields()
      }
    }
  }
</script>